<%@taglib prefix="epg" uri="http://chances.com.cn/jsp/epg" %>
<%
String rcPath = request.getContextPath() + "/remote/images";
request.setAttribute("rcPath", rcPath);
%>
<script type="text/javascript" src="<%=request.getContextPath() %>/remote/js/rc_js.js"></script>
<script>
var mImgPath = "${rcPath}";
</script>
<style>
<epg:head></epg:head>
#remoteCtrl div{
	position: relative;
}

#min_rc {
	position: relative;
	background-image: url('${rcPath}/bg.png');
	width:50%;
	height:50%;
	margin-bottom: 20%;
	margin-left: 25%;
	margin-top: 25%;
}

.rc_btn {
	position: absolute;
	width: 310px;
	height: 310px;
	margin-left: 100px;
	margin-top: 100px;
}

#rc_min_bg {
	background-image: url('images/rc-min-bg.png');
}

#rc_btn_left {
	background-image: url('images/btn-left-s.png');
	display: none;
}

#rc_btn_rigth {
	background-image: url('images/btn-right-s.png');
	display: none;
}

#rc_btn_up {
	background-image: url('images/btn-up-s.png');
	display: none;
}

#rc_btn_down {
	background-image: url('images/btn-down-s.png');
	display: none;
}

#rc_btn_ok {
	background-image: url('images/btn-ok-s.png');
	display: none;
}

#rc_btn_close {
	width: 82px;
	height: 82px;
	left: 440px;
	top: 0px;
	background-image: url('images/btn-close.png');
}

#rc_btn_vol1 {
	top: 400px;
	left: 50px;
	background-image: url('images/btn-vol-.png');
}

#rc_btn_vol2 {
	top: 480px;
	left: 50px;
	background-image: url('images/btn-vol+.png');
}

#rc_btn_stop {
	top: 400px;
	left: 380px;
	background-image: url('images/btn-stop.png');
}

#rc_btn_return {
	top: 480px;
	left: 380px;
	background-image: url('images/btn-return.png');
}

#rc_btn_full {
	top: 480px;
	left: 170px;
	width: 175px;
	background-image: url('images/btn-full.png');
}
</style>
<style>
.min_rc {
	width:69.3%;
	margin-bottom: 50%;
	margin-left:15%;
	/* text-align:-webkit-center; */
}

.rc_btn_close {
	margin-bottom: 122.4%;
	margin-left:74%;
}

.rc_min_bg {
	width:41.3%;
	margin-bottom: 82%;
	margin-left:28.8%;
}

.rc_icon {
	width:11.2%;
}

.rc_btn_vol_down {
	margin-bottom: 70%;
	margin-left:22%;
}

.rc_btn_vol_up {
	margin-bottom: 57%;
	margin-left:22%;
}

.rc_btn_full {
	width:23.3%;
	margin-bottom: 57%;
	margin-left:38%;
}

.rc_btn_stop {
	margin-bottom: 70%;
	margin-left:66%;
}

.rc_btn_back {
	margin-bottom: 57%;
	margin-left:66%;
}

#left-triangle {
	width:50px;
	height:50px;
	border-right: 50px solid transparent;
	border-top: 50px solid transparent;
	z-index:99999;
	margin-bottom: 96%;
	margin-left:28%;
}

#circle {
	width:50px;
	height:50px;
	border-right: 50px solid transparent;
	border-top: 50px solid transparent;
	z-index:99999;
	margin-bottom: 96%;
	margin-left:43%;
}

#right-triangle {
	width:50px;
	height:50px;
	border-right: 50px solid transparent;
	border-top: 50px solid transparent;
	z-index:99999;
	margin-bottom: 96%;
	margin-left:57%;
}

#up-triangle {
	width:50px;
	height:50px;
	border-right: 50px solid transparent;
	border-top: 50px solid transparent;
	z-index:99999;
	margin-bottom: 110%;
	margin-left:43%;
}

#down-triangle {
	width:50px;
	height:50px;
	border-right: 50px solid transparent;
	border-top: 50px solid transparent;
	z-index:99999;
	margin-bottom: 82%;
	margin-left:43%;
}




@media screen and (min-width: 300px) {
	.rc_min {
		background-image: url('${rcPath}/ctrl_min.png');
		background-repeat:no-repeat;
		background-position: 120px 200px;
		zoom : 50%;
		width:85%;
		height:100%;
		/* border:1px solid red; */
	}
}
</style>

<!-- panel bg -->
<div class="navbar-fixed-bottom rc_min"></div>

<!-- panel close btn -->
<div class="navbar-fixed-bottom rc_btn_close rc_icon" onclick="remoteCtrlDialog.close();"></div>

<%-- 
<div class="navbar-fixed-bottom min_rc">
	<img src="${rcPath}/bg.png" width="100%" height="100%"/>
</div>

<!-- panel close btn -->
<div class="navbar-fixed-bottom rc_btn_close rc_icon">
	<img src="${rcPath}/btn-close.png" width="100%" height="100%" onclick="remoteCtrlDialog.close();"/>
</div>

<!-- panel up down left right ok btn -->
<div class="navbar-fixed-bottom rc_min_bg">
	<img id="rc-min-bg" src="${rcPath}/rc-min-bg.png" width="100%" height="100%"/>
</div>

<div id='left-triangle' class="navbar-fixed-bottom" 
	 onclick="imageObj.cPanelImg('rc-min-bg','left-triangle',mImgPath);rc.left();"></div>
<div id="circle" class="navbar-fixed-bottom" 
	 onclick="imageObj.cPanelImg('rc-min-bg','circle',mImgPath);rc.enter();"></div>
<div id="right-triangle" class="navbar-fixed-bottom" 
	 onclick="imageObj.cPanelImg('rc-min-bg','right-triangle',mImgPath);rc.right();"></div>
<div id='up-triangle' class="navbar-fixed-bottom" 
	 onclick="imageObj.cPanelImg('rc-min-bg','up-triangle',mImgPath);rc.up();"></div>
<div id="down-triangle" class="navbar-fixed-bottom" 
	 onclick="imageObj.cPanelImg('rc-min-bg','down-triangle',mImgPath);rc.down();"></div>

<!-- panel vol- -->
<div class="navbar-fixed-bottom rc_btn_vol_down rc_icon">
	<img id="btn-vol-" src="${rcPath}/btn-vol-.png" width="100%" height="100%" 
		 onclick="imageObj.cImg('btn-vol-',mImgPath);rc.volDown();"/>
</div>

<!-- panel vol+ -->
<div class="navbar-fixed-bottom rc_btn_vol_up rc_icon">
	<img id="btn-vol-add" src="${rcPath}/btn-vol-add.png" width="100%" height="100%" 
		 onclick="imageObj.cImg('btn-vol-add',mImgPath);rc.volUp();"/>
</div>

<!-- panel full -->
<div class="navbar-fixed-bottom rc_btn_full">
	<img src="${rcPath}/btn-full.png" width="100%" height="100%" onclick="remoteCtrlDialog.full();"/>
</div>

<!-- panel resume -->
<div class="navbar-fixed-bottom rc_btn_stop rc_icon">
	<img id="btn-stop" src="${rcPath}/btn-stop.png" width="100%" height="100%" 
		 onclick="imageObj.cImg('btn-stop',mImgPath);rc.resumeOrPause();"/>
</div>

<!-- panel back -->
<div class="navbar-fixed-bottom rc_btn_back rc_icon">
	<img id="btn-return" src="${rcPath}/btn-return.png" width="100%" height="100%" 
		 onclick="imageObj.cImg('btn-return',mImgPath);rc.back();"/>
</div>
 --%>